<template>
    <div ref="topDiv">
        <Split v-model="split1" style="height: 100%; " class="demo-split">
            <div slot="left" style="height: 100%; overflow-y: auto; overflow-x: hidden; padding: 5px">
                <Tree ref="tree" :data="treeData" :load-data="loadData" :render="renderContent" style="width: 100%"></Tree>
            </div>
            <div slot="right" class="demo-split-pane">
                <Row :gutter="16">
                    <i-col>
                        <p style="font-size: 24px; font-weight: bold; height: 32px; line-height: 32px; padding: 10px;">得分：<span :style="{color: source >= 100 ? 'green': 'red' }">{{source}}</span></p>
                    </i-col>
                </Row>
                <Divider style="margin-bottom: 10px"/>
                <Form :label-width="90" ref="formInline" :model="formInline">
                    <Row :gutter="16" class="query-form">
                        <i-col span="8">
                            <FormItem label="扣分时间：" prop="se_date">
                                <DatePicker v-model="formInline.se_date" type="datetimerange" style="width: 100%" format="yyyy-MM-dd" placeholder="请选择扣分时间（开始，结束）"></DatePicker>
                            </FormItem>
                        </i-col>
                        <i-col span="16">
                            <div style="float: right;">
                                <Button class="ivu-btn-reset" @click="cancel">重置</Button>
                                <Button class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                            </div>
                        </i-col>
                    </Row>
                </Form>
                <Tabs :value="tabsName" @on-click="changeTabs">
                    <TabPane label="未按频次排查" name="name1">
                        <Table ref='table' :loading="loading" border :columns="columns" no-data-text="请选择组织机构" style="margin: 5px"
                               :data="infos" width="100%" :height="tableHeight2"  highlight-row stripe size="small"></Table>
                        <Row type="flex" justify="end" >
                            <i-col>
                                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                            </i-col>
                        </Row>
                    </TabPane>
                    <TabPane label="响应超时" name="name2">

                    </TabPane>
                    <TabPane label="整改超时" name="name3">
                        <Table ref='table' :loading="loading" border :columns="columns3" no-data-text="请选择组织机构" style="margin: 5px"
                               :data="infos" width="100%" :height="tableHeight2"  highlight-row stripe size="small"></Table>
                        <Row type="flex" justify="end" >
                            <i-col>
                                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                            </i-col>
                        </Row>
                    </TabPane>
                    <TabPane label="虚假闭合" name="name4">虚假闭合</TabPane>
                    <TabPane label="手工扣分" name="name5">手工扣分</TabPane>
                </Tabs>
            </div>
        </Split>
    </div>
</template>

<script>

    import {Api} from '../../../api'
    import {sessionStorage} from '@/common/cacheUtils.js';

    export default {
        name: "assessmentOrg",
        data(){
            return{
                tabsName: 'name1',
                source: '',
                split1: 0.2,
                treeData: [],
                selectNodeInfo: {},
                formInline: {},
                loading: false,
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '任务名称',
                        align: 'center',
                        key: 'taskName',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.taskName || '--')
                            ]);
                        }
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'companyName',
                        minWidth: 160,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.companyName || '--')
                            ]);
                        }
                    },
                    {
                        title: '扣分岗',
                        align: 'center',
                        key: 'positionName',
                        width: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.positionName || '--')
                            ]);
                        }
                    },
                    {
                        title: '扣分时间',
                        align: 'center',
                        key: 'taskDate',
                        minWidth: 130,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.taskDate || '')
                            ]);
                        }
                    },
                    {
                        title: '扣分原因',
                        align: 'center',
                        key: 'level',
                        minWidth: 200,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', '未按频次排查')
                            ]);
                        }
                    },
                ],
                infos: [],
                columns3: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '隐患流水号',
                        align: 'center',
                        key: 'flowNo',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '单位名称',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '扣分人',
                        align: 'center',
                        key: 'userName',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.userName || '--')
                            ]);
                        }
                    },
                    {
                        title: '上报时间',
                        align: 'center',
                        key: 'createDate',
                        minWidth: 100,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',  params.row.createDate || '--')
                            ]);
                        }
                    },
                ],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                pageSizeArray: [10, 20, 50],
                tableHeight2: ''
            }
        },
        mounted(){
            this.$refs.topDiv.style.height = (window.innerHeight - 120) + 'px';
            this.tableHeight2 = window.innerHeight - 380;
            this.initializationTree();
        },
        methods: {
            initializationTree(){
                let user = sessionStorage('userId').getObject('userId');
                this.$http.get(Api.orgInfoTree, {params: { parentId: user.companyId }} ).then(res => {
                    let data = {
                        id: user.companyId,
                        title: user.companyName,
                        expand: true,
                        children: []
                    }
                    res.data.data.map((i)=>{
                        data.children.push({
                            id: i.orgId,
                            title: i.orgName,
                            children: [],
                            loading: false,
                        })
                    });
                    this.treeData.push(data);
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            loadData(item, callback) {
                this.$http.get(Api.orgInfoTree, {params: { parentId: item.id }} ).then(res => {
                    let data = [];
                    res.data.data.map((i)=>{
                        data.push({
                            id: i.orgId,
                            title: i.orgName,
                            children: [],
                            loading: false,
                        })
                    });
                    callback(data);
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                    },
                    on:{
                        click: () => {
                            this.selectNodeInfo = data;
                            this.$http.get(Api.apsgAssessmentSource, {params: { id: data.id, type: 'org' }} ).then(res => {
                                if(res.data.status == 200){
                                    res.data.data!= null? this.source = res.data.data : this.source =  '';
                                }
                            });
                            this.query();
                        }
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: "ios-folder-outline",
                            },
                            style: {
                                marginRight: '8px',
                            }
                        }),
                        h('span', data.title)
                    ])
                ])
            },
            query(){
                if(JSON.stringify(this.selectNodeInfo) == "{}") return;
                let data = {
                    currentPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    orgId: this.selectNodeInfo.id,
                    type: this.tabsName
                }
                if(this.formInline.se_date.length!=0){
                    data.startDate = this.formatDate(this.formInline.se_date[0], 'yyyy-MM-dd');
                    data.endDate = this.formatDate(this.formInline.se_date[1], 'yyyy-MM-dd');
                }
                this.loading = true;
                let url = Api.apsgAssessmentAbnormal;
                this.$http.get(url, {params: data}).then((res) => {
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }).catch(e => {
                    this.$Message.error("数据获取失败");
                })
            },
            cancel(){
                this.query();
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            changeTabs(name){
                this.tabsName = name;
                this.resetList();
                if(JSON.stringify(this.selectNodeInfo) != "{}") this.query();
            },
            resetList(){
                this.pagedata = {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                };
                this.infos = [];
            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
        }
    }
</script>

<style scoped>
    @import './../../../index.css';
    .demo-split{
        height: 200px;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
</style>
